<template>
	<view class="dmm-container dmm-container-grey">
		<view class="section">
			<u-cell-group :border="false">
				<u-cell v-if="modifyType === '3'" title="商户名称" :value="detail.extend.merShortName">
				</u-cell>
				<u-cell :title="modifyType === '3' ? '原费率' : '原默认费率'">
					<text slot="value" class="text text-primary">{{rate}}%</text>
				</u-cell>
				<u-cell :title="modifyType === '3' ? '新费率' : '新默认费率'">
					<u--input
						slot="value"
						:placeholder="modifyType === '3' ? '请输入新的费率' : '请输入新的默认费率'"
						type="digit"
						clearable
						maxlength="6"
						placeholderStyle="color: #d7d7d7"
						color="#222"
						border="none"
						inputAlign="right"
						v-model="newRate"
					></u--input>
				</u-cell>
			</u-cell-group>
		</view>
		
		<u-button type="primary" :disabled="!rate" text="提交" @click="updateRate({modifyType, modifyMno: mno, newRate, agentNo: agentInfo.agentNo, type: 'merchant'})"></u-button>
	</view>
</template>

<script>
	import { mapState, mapActions } from "vuex"
	
	export default {
		data() {
			return {
				newRate: '',
				mno: '',
				modifyType: '3' // '3': 修改下属商户费率, '1': 修改默认费率
			}
		},
		
		computed: {
			...mapState('home', ['agentInfo']),
			...mapState('manageDetail', ['detail']),
			rate: function () {
			  return this.modifyType === '3' ? this.detail.rate : this.agentInfo.directMerchantRate
			    }
		},
		
		methods: {
			...mapActions('manage', ['updateRate'])
		},
		
		onLoad(options) {
			const {mno, modifyType} = options
			
			this.modifyType = modifyType
			this.mno = this.detail.mno
			uni.setNavigationBarTitle({
				title: modifyType === '1' ? '默认费率修改' : '费率修改'
			})
		}
	}
</script>

<style lang="scss">
	.section {
		margin-bottom: 242rpx;
	}
	
	.u-button {
		width: 660rpx !important;
		margin: auto;
	}
</style>
